<!-- home -->
<template>
    <div class="page-box list-box">
        <van-tabs v-model="active">
            <van-tab title="标签 1">
                <van-divider :style="{ color: '#990030', borderColor: '#666', padding: '0 16px' }">全局过滤器</van-divider>
                <p class="mt30 mb30 fz18"><span class="fz13">手机号中间四位隐藏：</span>{{ '13717135460' | hidePhone }}</p>
                <p class="mt30 mb30 fz18"><span class="fz13">金额千分位分隔：</span>{{ 6857653210 | thousands }}</p>

                <van-divider :style="{ color: '#990030', borderColor: '#666', padding: '0 16px' }">防抖节流函数</van-divider>
                <van-row class="ta-c" type="flex" justify="center">
                    <van-col span="12">
                        <van-button type="info" size="small" @click="debounceFn('wxy')">函数防抖</van-button>
                    </van-col>
                    <van-col span="12">
                        <van-button type="info" size="small" @click="throttleFn">函数节流</van-button>
                    </van-col>
                </van-row>

                <van-divider
                    :style="{ color: '#990030', borderColor: '#666', padding: '0 16px' }">页面跳转/ajax请求/session操作</van-divider>
                <!-- layout 布局 -->
                <van-row class="mt20" gutter="20">
                    <van-col span="8">
                        <van-button type="info" size="small" @click="goAbout">去关于我页面</van-button>
                    </van-col>
                    <van-col span="8">
                        <van-button type="info" size="small" @click="loginBtn">登录请求</van-button>
                    </van-col>
                    <van-col span="8">
                        <van-button type="info" size="small" @click="sessionBtn">session操作</van-button>
                    </van-col>
                </van-row>
            </van-tab>
            <van-tab title="标签 2">
                <van-cell icon="success" v-for="item in list" :key="item" :title="item" />
            </van-tab>
            <van-tab title="标签 3">内容 3</van-tab>
            <van-tab title="标签 4">444</van-tab>
            <van-tab title="标签 5">内容 5</van-tab>
            <van-tab title="标签 6">内容 6</van-tab>
            <van-tab title="标签 7">内容 7</van-tab>
            <van-tab title="标签 8">内容 8</van-tab>
        </van-tabs>
    </div>
</template>

<script>
// 导入session
import session from '@/utils/session'

import { Debounce, Throttle } from '@/utils/index' // 引入工具函数

export default {
    data() {
        return {
            active: 0,
            list: [
                'Vue-cli4',
                '配置多环境变量',
                'VantUI 组件按需加载',
                'Sass 全局样式',
                'Webpack 4',
                'Vuex 状态管理',
                'Axios 封装及接口管理',
                'Vue-router',
                'Webpack 4 vue.config.js 基础配置',
                '配置 proxy 跨域',
                '配置 alias 别名',
                '配置 打包分析',
                '配置 externals 引入 cdn 资源',
                '去掉 console.log',
                'splitChunks 单独打包第三方模块',
                '添加 IE 兼容',
                'Eslint+Pettier 统一开发规范'
            ]
        }
    },
    mounted() {

    },
    methods: {
        goAbout() {
            this.$router.push('/about')
        },
        // 登录
        loginBtn() {
            let data = {
                userName: 'admin',
                password: 123456
            }
            this.$api.loginxxx(data).then(res => {
                let { status, data } = res.data
                if (status === 0) {
                    this.$toast('接口请求成功~ 登录了')
                    this.$router.push('/home')
                }
            })
        },
        sessionBtn() {
            session.set('test', 'helloworld')
            this.$toast('session 存储成功')
        },
        // 按钮防抖
        debounceFn: Debounce(function (val) {
            // this.queryUsers() 执行函数
            this.$toast.success('函数防抖...')
            console.log(val)
        }, 1000),
        // 按钮节流
        throttleFn: Throttle(function (val) {
            // this.queryUsers() 执行函数
            this.$toast.success('函数节流...')
            console.log(val)
        }, 2000)
    }
}
</script>
<style lang="less" scope>
.list-box {

    padding: 0;
    background: #fff;
    box-sizing: border-box;

    .van-tabs {
        .van-tabs__content {
            padding: 10px;
        }
    }
}
</style>
